<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>后台管理系统</title>
    <script src="${ctxPath}/static/vue.min.js"></script>
    <script src="${ctxPath}/static/axios.min.js"></script>
    <script src="${ctxPath}/static/jquery.min.js"></script>
    <script src="${ctxPath}/static/bootstrap.min.js"></script>
    <script src="${ctxPath}/static/bootoast.js"></script>
    <script src="${ctxPath}/static/config.js"></script>
    <link href="${ctxPath}/static/bootstrap.min.css" rel="stylesheet">
    <link href="${ctxPath}/static/css/bootstrap.css" rel="stylesheet" />
    <link href="${ctxPath}/static/css/common.css" rel="stylesheet"/>
</head>
<style>
    #main-nav {
        float:left; margin:100px 0 0 20px;border:0;position:fixed;
    }
    #main-nav li a{
        font-size:20px;
    }
    .textarea{
        border-radius:5px;font-size:20px;height:80px;width:90%;border:1px;border:1px solid #ccc;
    }
    #app{
        margin:20px 0 0 30px;
    }
    .empty {
        background:#e8bacf;
    }
    /*图片上传动画*/
    #circle{
        width: 100px;
        height: 100px;
        border: 5px white solid;
        border-left-color: #ff5500;
        border-right-color:#0c80fe;
        border-radius: 100%;
        animation: loading1 1s infinite linear;
    }
    \@keyframes loading1{
    from{transform: rotate(0deg)}to{transform: rotate(360deg)}
    }
</style>
<body>
<div id="app">
    <div class="remind_title2">
        产品编辑
        <div class="product-new-button" style="margin-right: 50px;"><label class="btn btn-info" v-on:click="backList()">返回</label></div>
    </div>
    <div style="width:45vw;display: inline-block;vertical-align: top;margin:0 50px 0 0">
        <div class="input-group">
            <label class="input-group-addon">产品名称</label>
            <input class="form-control" v-model="req_data.productName" :class="{empty:req_data.productName==''&&is_save}">
        </div>
        <br>
        <div class="input-group">
            <label class="input-group-addon">借款额度(元)</label>
            <input class="form-control" placeholder="最小金额" v-model="req_data.minLoanAmount" :class="{empty:req_data.minLoanAmount==''&&is_save}" onkeyup="value=value.replace(/[^\d]/g,'')">
            <hr class="input-group-addon" style="margin:0px;height:1px;border:0px;color:#D5D5D5;"/>
            <input class="form-control" placeholder="最大金额" v-model="req_data.maxLoanAmount" :class="{empty:req_data.maxLoanAmount==''&&is_save}" onkeyup="value=value.replace(/[^\d]/g,'')">
        </div>
        <br>
        <div class="input-group">
            <label class="input-group-addon">借款期限(天)</label>
            <input class="form-control" placeholder="最小天数" v-model="req_data.minLoanTerm" :class="{empty:req_data.minLoanTerm==''&&is_save}" onkeyup="value=value.replace(/[^\d]/g,'')">
            <hr class="input-group-addon" style="margin:0px;height:1px;border:0px;color:#D5D5D5;"/>
            <input class="form-control" placeholder="最大天数" v-model="req_data.maxLoanTerm" :class="{empty:req_data.maxLoanTerm==''&&is_save}" onkeyup="value=value.replace(/[^\d]/g,'')">
        </div>
        <br>
        <div class="input-group">
            <label class="input-group-addon">借款利率</label>
            <input class="form-control" v-model="req_data.dayLoanRate" :class="{empty:req_data.dayLoanRate==''&&is_save}">
        </div>
        <br>
        <div class="input-group">
            <label class="input-group-addon">产品申请页h5</label>
            <input class="form-control" v-model="req_data.productH5Url" :class="{empty:req_data.productH5Url==''&&is_save}" placeholder="http://">
        </div>
        <br>
        <div>
            <label >申请流程</label>
        </div>
        <div v-for="item in req_data.applyFlowList">
            <div class="input-group">
                <label class="input-group-addon">{{item.itemNo}}、</label>
                <input class="form-control" v-model="item.val" :class="{empty:item.val==''&&is_save}">
            </div>
            <br>
        </div>
    </div>


    <div style="width:45vw;display: inline-block;vertical-align: top;">
        <div>
            <div>
                <label style="margin:0 2vw 0 0">产品LOGO</label>
            </div>
            <div>
                <label style="border:1px solid #ccc;">
                    <div v-if="is_uploading" id="circle"></div>
                    <img v-if="!is_uploading" :src="req_data.productIconUrl+'?imageView2/1/w/120/h/120'" style="width:120px" :class="{empty:req_data.productIconUrl==''&&is_save}">
                    <input v-if="!is_uploading" style="position: absolute;opacity:0;" type='file' v-on:change="img_upload" accept="image/gif,image/jpeg,image/jpg,image/png">
                </label>
            </div>
        </div>
        <div>
            <p style="margin-top:7px">产品特色</p>
            <textarea maxlength="300" class="textarea" v-model="req_data.productSellPoint">{{req_data.productSellPoint}}</textarea>
        </div>
        <div>
            <p style="margin-top:7px">申请条件</p>
            <textarea maxlength="300" class="textarea" v-model="req_data.applyCondition" :class="{empty:req_data.applyCondition==''&&is_save}">{{req_data.applyCondition}}</textarea>
        </div>
        <div>
            <p style="margin-top:7px">审核说明</p>
            <textarea maxlength="300" class="textarea" v-model="req_data.auditDetail" :class="{empty:req_data.auditDetail==''&&is_save}">{{req_data.auditDetail}}</textarea>
        </div>
        <div>
            <p style="margin-top:7px">产品介绍</p>
            <textarea maxlength="300" class="textarea" v-model="req_data.productIntroduce" :class="{empty:req_data.productIntroduce==''&&is_save}">{{req_data.productIntroduce}}</textarea>
        </div>
    </div>
    <div style="margin:0 0 0 10vw">
        <label class="btn btn-info" v-on:click="update()">更新</label>
        <label class="btn btn-info" v-on:click="reset()">重置</label>
    </div>
</div>
<!--页面部分-->


<!--js部分-->
<script>

    var data = {
        is_save:false,//是否点击保存按钮
        is_uploading:false,//是否上传中
        saved:false,//已保存
        imgs: [],//图片路径
        imgData: {
            accept: 'image/gif, image/jpeg, image/png, image/jpg',
        },
        req_data:{
            "id":null,
            "productName":"",
            "minLoanAmount":null,
            "maxLoanAmount":null,
            "minLoanTerm":null,
            "maxLoanTerm":null,
            "dayLoanRate":null,
            "productSellPoint":"",
            "productH5Url":"",
            "productIconUrl":"",
            "applyFlowList":[],
            "applyCondition":"",
            "auditDetail":"",
            "productIntroduce":""
        },
        productId:null
    };
    new Vue({
        el:'#app',
        data:data,

        //接口url 初始化
        beforeCreate:function(){
            this.upload_url = request_prefix+"/cash/upload"  //图片上传
        },
        created:function(){

        },
        mounted:function () {
            var _this = this;
            _this.getProductDetail();
        },
        methods:{
            //查询详情
            getProductDetail: function () {
                var _this = this;
                var id = localStorage.getItem("product_id_");
                _this.productId = id;
                axios.get(request_prefix+"/cash/product/detail",{
                    params:{
                        productId:id
                    }
                })
                    .then(function (res) {
                        if(res.data.code === 0) {
                            _this.req_data = res.data.data;
                        } else {
                            _this.hint_toast('获取数据失败')
                        }
                    })
                    .catch(function () {
                        _this.hint_toast('获取数据失败');
                    })
            },
            //更新
            update:function(){
                var _this = this;
                //等待图片上传完成
                if(_this.is_uploading==true){
                    _this.hint_toast('请等待图片上传完成');
                    return
                }
                //上传图片判断
                if(_this.req_data.productIconUrl.indexOf(cash_ip) != -1){
                    _this.hint_toast('请上传产品logo图片');
                    return
                }
                //遍历入参是否有空
                for(item in _this.req_data){
                    if(item != "productSellPoint" && _this.req_data[item]==""){
                        _this.hint_toast('请填写完整信息');
                        return
                    }
                }
                _this.req_data.id = parseInt(_this.productId);
                axios.post(request_prefix+"/cash/product/update",_this.req_data)
                    .then(function(res){
                        if (res.data.code===0){
                            _this.hint_toast('更新成功',color_type='success');
                            setTimeout(function () {
                                window.location.href = request_prefix+"/cash/product/detailPage";
                            },1000);
                        }else{
                            _this.hint_toast(res.data.message);
                        }
                    })
                    .catch(function () {
                        alert("程序出错，更新失败")
                    })
            },

            //重置
            reset:function(){
                window.location.reload()
            },

            backList:function () {
                window.location.href = request_prefix+"/cash/product/listPage";
            },

            //吐司提示
            hint_toast:function(msg,color_type='danger'){
                bootoast({
                    message: msg,
                    type: color_type,
                    position:'right-bottom',
                    timeout:1
                });
            },

            //图片上传
            img_upload(event){
                //浏览器是否支持
                if (typeof FileReader === 'undefined') {
                    alert("抱歉，你的浏览器不支持图片上传，请使用新的浏览器操作！");
                }
                var reader =new FileReader();
                const img1=event.target.files[0];
                var size=img1.size;//文件的大小，判断图片的大小
                if(size>1024 * 1024 * 1){
                    alert('请选择1M以内的图片！');
                    return false;
                }
                var fd = new FormData();
                fd.append('picture',img1,img1.name);
                var _this=this
                this.is_uploading = true
                axios.post(this.upload_url,fd,{
                    headers: {'Content-Type': 'multipart/form-data'}
                }).then(function(res){
                    if (res.data.code==0){
                        _this.req_data.productIconUrl=res.data.data.pictureUrl
                        console.log(_this.req_data.productIconUrl)
                    }else{
                        alert(res.data.message);
                    }
                    _this.is_uploading = false
                }).catch(error => {
                    alert('上传图片出错！');
                    _this.is_uploading = false
                })
            }

        }
    });
</script>
<!--js部分-->
</body>

</html>